<template>
  <!-- 引入container布局 -->
    <el-container class="home-container">
        <!-- 头部 -->
  <el-header> 
      <div>
          <img src="../assets/logo.png" alt/>
          <span>电商管理平台</span>
      </div>
        <el-menu
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1" @click="personal">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-gerenxinxi"></use>
            </svg>
            个人信息</el-menu-item>
        <el-menu-item index="2" @click="shop">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-dianpu"></use>
            </svg>
            店铺信息</el-menu-item>
        <el-menu-item index="3" @click="follow">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-wodeguanzhu"></use>
            </svg>
            关注用户情况</el-menu-item>
        </el-menu>
        <el-button type="info" style="right:10px;position: absolute"  @click="logout" >安全退出</el-button>
    </el-header>
     <!-- 侧边栏 -->
    <el-container>
    <el-aside width="190px">
        <el-row class="tac" style="height: 100%">
        <el-col style="height: 100%">
        <el-menu
            
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 100%"    >
            <el-menu-item index="1" @click="home">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-shouye_huaban1"></use>
                </svg>
                <span slot="title" >首页</span>
            </el-menu-item>
            <el-menu-item index="2" @click="order">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-dingdan"></use>
                </svg>
                <span slot="title" >订单处理中心</span>
            </el-menu-item>
             <el-menu-item index="3" @click="shopManage">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-shangpin1"></use>
                </svg>
                <span slot="title" >商品管理</span>
            </el-menu-item>
            </el-menu>
        </el-col>
        </el-row> 
        </el-aside>
        <!-- Main区域 -->
      <el-container>
      <el-main>
          <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">电商管理平台</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">订单处理中心</a></el-breadcrumb-item>
          </el-breadcrumb>
          <template>
            <!-- 用户列表部分  border边框 stripe隔行变色  max-height设置最大流体-->
            <el-table
                @selection-change="getRowDatas"
                :data="orders"
                style="width:110%; height:40% overflow:auto" border stripe max-height="580">
                <el-table-column
                label="日期"
                width="180">
                <template slot-scope="scope" >
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px;height:90px" >{{ scope.row.buyTime }}</span>
                </template> 
                </el-table-column>
                <el-table-column
                label="买家ID"
                width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                    <p>买家ID: {{ scope.row.buyId }}</p>
                    <p>快递单号: {{ scope.row.courierNum }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.buyId }}</el-tag>
                    </div>
                    </el-popover>
                </template>
                </el-table-column>
                <el-table-column
                label="商品ID"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.gsId }}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="订单ID"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.oid }}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="价格"
                width="180">
                <template slot-scope="scope">
                   <span>{{ scope.row.total }}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="订单状态"
                width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.status }}  </span>
                  <el-button v-if="scope.row.status==='未发货'" type="primary" size="mini" @click="open(scope.$index, scope.row)" >请输入快递码</el-button>
                  <el-button v-else type="primary" size="mini" @click="open(scope.$index, scope.row)" disabled>请输入快递码</el-button>
                </template>
                </el-table-column>
                <el-table-column
                label="地址"
                width="180">
                <template slot-scope="scope">
                    <span>{{ scope.row.address }}</span>
                </template>
                </el-table-column>
            </el-table>
        </template>
      </el-main>
      </el-container>
  </el-container>
</el-container>
</template>
<script>
export default{
     data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        value1: true,
        orders: [],
      }
    },
    inject :['reload'],   //注入reload方法，刷新界面
    created(){
        this.getOrderAll();
    },   
    methods:{
        // 安全退出
        logout(){
            window.sessionStorage.clear();  //清除session
            this.$router.push("/login");    //回到首页
        },
         // 顶部栏
        handleSelect(key, keyPath) {
        console.log(key, keyPath);     
      },
      // 侧边栏
       handleOpen(key, keyPath) {     
        console.log(key, keyPath);
      },
       handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 处理时间显示时间戳问题
      fmtDate(obj){
        var date =  new Date(obj);
        var y = 1900+date.getYear();
        var m = "0"+(date.getMonth()+1);
        var d = "0"+date.getDate();
        return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
      },
      // 判断发货状态 0：未发货 1：已发货
      ifStatus(status){
        
        if (status == 0){
          return "未发货"
        } 
        else{
          return "已发货"
        }
      },
      // 页面跳转
      personal(){
          this.$router.push('/personal')
      },
      shop(){
          this.$router.push('/shop')
      },
      follow(){
          this.$router.push('/follow')
      },
      home(){
          this.$router.push('/home')
      },
      order(){
          this.$router.push('/order')
      },
      shopManage(){
          this.$router.push('/shopManage')
      },
      async getOrderAll(){       // 获取订单列表
          const {data :orders} = await this.$http.get("orderAll"); // 访问后台
          console.log(orders.orders);
          this.orders = orders.orders;
          this.orders.map(item=>{
            item.buyTime = this.fmtDate(item.buyTime);
          })
          this.orders.map(item=>{
            item.status = this.ifStatus(item.status);
          })
      },
      focusUpdateOrder(){
          this.$forceUpdate();
      },
      getRowDatas(data){
        console.log(data);
      },
      // 订单状态写入
      open(index,row) {
        this.$prompt('请输入快递码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[A-Z]{2}[0-9]{13,13}$/,
          inputErrorMessage: '快递码格式不正确',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 30);
              }, 30);
              const params={
                  oid:row.oid,
                  courierNum:instance.inputValue
                };
              this.$http.post('addCourierNum',params).then(
                res=>{
                  if(res.data.flag === 'ok'){
                    this.$message(
                      {
                        type: 'success',
                        message:'添加成功'
                      }
                    )
                    this.reload();
                    done();
                  }else{
                    this.$message(
                      {
                        message:'添加失败，请刷新重试'
                      }
                    )
                  }
                }
              )
            
            } else {
              done();
            }
          }
        }).then(({ value }) => {
      
          this.$message({
          type: 'success',
          message: '你输入的快递码是: ' + value,
          
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    },
};
</script>
<style lang = 'less' scoped>
// 布局器样式
.home-container{
    height:100%;
}
// 头样式
.el-header {
    background-color: #545c64;
    display: flex;
    /* justify-content: space-between;  // 左右贴边 */
    padding-left: 0%;   // 左边界
    align-items: center;
    color:#fff;
    font-size: 20px;
    div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }   
}
// 主体样式
.el-main {
    background-color: #eaedf1;
}
img{
    width: 55px;
    height: 55px;
}
// 侧边栏
.el-menu{
    height: 100%;
    overflow-y: auto !important;
    text-align: left;
}
// 主界面
.el-main {
    background-color: #E9EEF3;
    color: #333;
  }
</style>